<template>
  <div class="box">
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item label="菜单名">
          <el-input placeholder="请输入内容" clearable v-model="searchData.topMenuName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="菜单编号">
          <el-input placeholder="请输入内容" clearable v-model="searchData.topMenuCode" size="small"></el-input>
        </el-form-item>
      </search>
      <el-button class="reset" size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
    </div>
    <div class="fun-btn">
      <el-button size="small"
                 type="primary"
                 @click="handleAddEdit"
                 icon="el-icon-circle-plus-outline">新增
      </el-button>
      <el-button size="small" type="danger" @click="handleDel" plain icon="el-icon-delete">删除</el-button>
    </div>

    <avue-crud :data="tableData"
               :page.sync="page"
               :option="option"
               :table-loading="loading"
               @on-load="onLoad"
               @row-save="handleRowSave"
               @row-update="handleRowUpdate"
               @current-change="handleCurrentChange"
               @size-change="handleSizeChange"
               @selection-change="selectionChange"
               ref="crud">
      <template slot-scope="scop" slot="icon">
        <i :class="scop.row.icon" style="font-size: 24px"></i>
      </template>

      <template slot-scope="scop" slot="orderNo">
        <el-input-number v-model="scop.row.orderNo"
                         @change="rowChange(scop.row)"
                         :min="1"
                         :max="100">
        </el-input-number>
      </template>

      <template slot-scope="scop" slot="isEnable">
        <el-switch v-model="scop.row.isEnable"
                   @change="rowChange(scop.row)"></el-switch>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   @click="handleCollocation(scope.row.id)"
                   icon="el-icon-setting">菜单配置
        </el-button>
      </template>
    </avue-crud>

    <el-dialog :title="'下级菜单配置'"
               width="50%"
               top="5vh"
               :destroy-on-close="true"
               :visible.sync="dialogShow">
      <div class="import-content" v-loading="menuLoading">
        <el-tree :data="menuGrantList"
                 show-checkbox
                 node-key="id"
                 class="menu-list"
                 ref="treeMenu"
                 default-expand-all
                 :default-checked-keys="checkedKeys"
                 :props="props">
        </el-tree>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogShow = false">取 消</el-button>
          <el-button :loading="btnLoading" size="small" type="primary" @click="onSubmit">确 定</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import Search from '../../../../../components/search/search'
import iconList from '../../../../../config/iconList'
import { getMenuList, editMenuList, addMenu, delMenu, setMenu } from '../../../../../api/menuSet/menuSet'
import { getMenuListTree, getMenuTree } from '../../../../../api/menu/menuLeftNav'

export default {
  name: 'highestMenu',
  components: { Search },
  // 顶部菜单设置
  data () {
    return {
      menuLoading: true,
      menuGrantList: [],
      checkedKeys: [],
      props: {
        label: 'menuName',
        value: 'id'
      },
      menuIds: [],
      btnLoading: false,
      searchData: {
        topMenuName: '',
        topMenuCode: ''
      },
      dialogShow: false,
      params: [],
      tableSelected: [],
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 300px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 280,
        column: [
          {
            label: '菜单名',
            prop: 'topMenuName',
            overHidden: true,
            width: 180,
            rules: [{
              required: true,
              message: '请输入菜单名',
              trigger: 'blur'
            }]
          }, {
            label: '菜单图标',
            prop: 'icon',
            type: 'icon',
            width: 80,
            slot: true,
            iconList: iconList,
            rules: [
              {
                required: true,
                message: '请输入菜单图标',
                trigger: 'click'
              }
            ]
          }, {
            label: '菜单编号',
            prop: 'topMenuCode',
            overHidden: true,
            width: 150,
            rules: [{
              required: true,
              message: '请输入菜单编号',
              trigger: 'blur'
            }]
          }, {
            label: '菜单排序',
            prop: 'orderNo',
            width: 180,
            type: 'number',
            align: 'center',
            slot: true,
            rules: [{
              required: true,
              message: '请输入菜单排序',
              trigger: 'blur'
            }]
          }, {
            label: '是否可用',
            prop: 'isEnable',
            type: 'switch',
            value: true,
            slot: true,
            dicData: [{ value: false }, { value: true }],
            rules: [{
              required: true,
              message: '请选择是否可用',
              trigger: 'blur'
            }]
          }
        ]
      }
    }
  },
  methods: {
    onLoad () {
      // 加载列表
      this.loading = true
      const query = {
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage
      }
      if (this.params.length > 0) {
        query.params = this.params
      } else {
        delete query.params
      }
      getMenuList(query).then((res) => {
        const data = res.data.data
        this.page.total = data.total
        this.tableData = data.list
        this.loading = false
      })
    },
    handleCurrentChange (currentPage) {
      // 翻页 第几页
      this.page.currentPage = currentPage
    },
    handleSizeChange (pageSize) {
      // 翻页 一页多少条
      this.page.pageSize = pageSize
    },
    rowChange (row) {
      // 排序, 是否可用
      editMenuList(row).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    onSearch () {
      // 搜索
      this.page.currentPage = 1
      this.page.pageSize = 20
      this.params = []
      Object.keys(this.searchData).forEach((key) => {
        if (this.searchData[key]) {
          this.params.push({
            op: 'like',
            name: key,
            value: this.searchData[key]
          })
        }
      })
      this.onLoad()
    },
    handleReset () {
      // 重置
      Object.keys(this.searchData).forEach((key) => {
        this.searchData[key] = ''
      })
    },
    selectionChange (val) {
      // 选择表格
      this.tableSelected = val
    },
    handleAddEdit () {
      this.$refs.crud.rowAdd()
    },
    handleRowSave (row, done, loading) {
      // 保存新增
      addMenu(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    handleRowUpdate (row, index, done, loading) {
      // 编辑修改
      editMenuList(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    handleDel () {
      if (this.tableSelected.length < 1) {
        this.$message.warning('请至少勾选一条需要删除的菜单信息！')
      } else {
        this.$confirm('此操作将永久删除选中的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map((item) => {
            ids.push(item.id)
          })
          delMenu(ids).then(res => {
            this.loading = true
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.onLoad()
          })
        }).catch(() => {
        })
      }
    },
    handleCollocation (id) {
      // 菜单配置
      this.menuLoading = true
      this.menuIds = [id]
      getMenuTree([id]).then(res => {
        this.checkedKeys = res.data.data.menu
        getMenuListTree({ pageNo: 1, pageSize: 1000 }).then(res => {
          this.menuGrantList = res.data.data
          this.menuLoading = false
        }).catch(() => {
          this.menuLoading = false
        })
      })
      this.dialogShow = true
    },
    onSubmit () {
      // 提交菜单配置
      this.btnLoading = true
      const parmes = {
        topMenuIds: this.menuIds,
        menuIds: this.$refs.treeMenu.getCheckedKeys().concat(this.$refs.treeMenu.getHalfCheckedKeys())
      }
      setMenu(parmes).then(res => {
        this.$message.success('配置成功！')
        this.btnLoading = false
        this.dialogShow = false
        this.onLoad()
      }).catch(() => {
        this.btnLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .box {
    ::v-deep .search-btn {
      margin-top: 0px;
    }
    .reset {
      margin-top: 5px;
    }

    ::v-deep .el-input-number {
      width: 140px;
    }
  }
  .menu-list{
    margin-bottom: 10px;
    max-height: calc(100vh - 245px);
    overflow-y: auto;
    & + .dialog-footer{
      text-align: right;
    }
  }

</style>
